 <template>
     <div class="user-container">
       <!-- 用户基本信息面板 -->
       <div class="user-card">
         <!-- 用户头像、姓名 -->
         <van-cell>
           <!-- 使用 title 插槽来自定义标题 -->
           <template #icon>
             <img :src="userobj.photo" alt="" class="avatar">
           </template>
           <template #title>
             <span class="username">{{userobj.name}}</span>
           </template>
           <template #label>
             <van-tag color="#fff" text-color="#007bff">申请认证</van-tag>
           </template>
         </van-cell>
         <!-- 动态、关注、粉丝 -->
         <div class="user-data">
           <div class="user-data-item">
             <span>{{userobj.art_count}}</span>
             <span>动态</span>
           </div>
           <div class="user-data-item">
             <span>{{userobj.follow_count}}</span>
             <span>关注</span>
           </div>
           <div class="user-data-item">
             <span>{{userobj.fans_count}}</span>
             <span>粉丝</span>
           </div>
         </div>
       </div>
   
       <!-- 操作面板 -->
       <van-cell-group class="action-card">
         <van-cell icon="edit" title="编辑资料" is-link  @click="bianji"/>
         <van-cell icon="chat-o" title="小思同学" is-link  @click="$router.push(`/chat?url=${userobj.photo}`)"/>
         <van-cell icon="warning-o" title="退出登录" is-link @click="tuichudenglu" />
       </van-cell-group>
     </div>
</template>
   
<script>
import {jibenxinxi} from '@/api/index.js'
import {removeToken} from '@/utils/token.js'
import { Dialog,Toast } from 'vant';
   export default {
     name:'user',
      data(){
         return {
            userobj:{}  //代表用户的对象
         }
      },
     async activated(){  // activated代表用户此页面激活了,重新发送请求 ，只有绑定了组件缓存才能使用这个函数
       const res=await jibenxinxi()
         this.userobj=res.data.data
      },
      methods:{
         tuichudenglu(){  //退出登录的函数
           Dialog.confirm({
               message: '确认退出登录吗',
               })
               .then(() => { //表示用户点击的确认选项
                  // on confirm
                  removeToken()
                  localStorage.removeItem('refresh_token')
                  Toast.success('退出成功');
                  this.$router.replace('/login')
               })
               .catch(() => { //表示用户点击的取消选项
                  // on cancel
               });
         },
         bianji(){  //编辑资料跳转函数
            this.$router.push('/useredit')
         }
      }
   }
   </script>
   
<style scoped lang="less">
   .user-container {
     .user-card {
       background-color: #007bff;
       color: white;
       padding-top: 20px;
       .van-cell {
         background: #007bff;
         color: white;
         &::after {
           display: none;
         }
         .avatar {
           width: 60px;
           height: 60px;
           background-color: #fff;
           border-radius: 50%;
           margin-right: 10px;
         }
         .username {
           font-size: 14px;
           font-weight: bold;
         }
       }
     }
     .user-data {
       display: flex;
       justify-content: space-evenly;
       align-items: center;
       font-size: 14px;
       padding: 30px 0;
       .user-data-item {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 33.33%;
       }
     }
   }
</style>